<template>
    <div class="one" style="width:1050px;margin:0 auto">
        <el-main id="main" style="text-align:left">
            <h2 style="text-align:center">非一套表调查单位投资项目情况</h2>
            <div style="text-align:right">
                <p>表号：711—2表</p>
                <p>制定机关：国家统计局国务院经济普查办公室</p>
                <p>文号：国统字（2018）号</p>
                <p>有效期至：2019年6月</p>
            </div>
            <div>
                <p>组织机构代码:&nbsp;{{organizationCode}}</p>
                <p>统一社会信用代码:&nbsp;{{socialCreditCode}}</p>
                <p>单位详细名称:&nbsp;{{unitDetailedName}}</p>
            </div>
            <el-form ref="form" :model="form"   style="text-align:left" :rules="rules">
                    <div>
                        <el-form-item prop="investmentAmount">
                            <span>固定资产本年完成投资额</span>
                                <el-input style="width:200px" v-model="form.investmentAmount"  @keyup.native="testMoney(form.investmentAmount,'investmentAmount')"></el-input>
                                <span class="red" v-show="saveData.investmentAmount">请输入小数点后5位至小数点前20位之间的数字</span>
                            <span>万元（甲）</span>
                        </el-form-item>
                    </div>
                     <div>
                        <el-form-item prop="moreThan5000">
                            <span>其中：5000万元及以上项目</span>
                            <el-input style="width:200px" v-model="form.moreThan5000"  @keyup.native="testNumber(form.moreThan5000,'moreThan5000')"></el-input>
                            <span class="red" v-show="saveData.moreThan5000">请输入正整数</span>
                            <span>个（乙）（其他有5000万以上在建项目法人单位填写下表）</span>
                            <el-button type="primary" style="text-align:left" @click="addRow"> <i class="el-icon-plus"></i> 添加行</el-button> 
                        </el-form-item>
                        
                    </div>
                    <div >
                        <table >
                        <thead>
                            <th class="bian" style="width:95px;text-align:center">项目编码</th>
                            <th class="bian" style="width:95px;text-align:center">项目名称</th>
                            <th class="bian" style="text-align:center;margin-top:5px;">项目建设所在地及区划</th>
                            <th class="bian" style="width:80px;text-align:center">项目行业编码</th>
                            <th class="bian" style="width:95px;text-align:center">项目开工时间(年月)</th>
                            <th class="bian" style="width:95px;text-align:center">本年全部投产时间(年月)</th>
                            <th class="bian" style="width:80px;text-align:center">计划总投资（万元）</th>
                            <th class="bian" style="width:90px;text-align:center">自开始建设累计完成投资（万元）</th>
                            <th style="width:80px;text-align:center">本年完成投资（万元）</th>
                            <th class="bian" style="width:90px;text-align:center">操作</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="bian" style="text-align:center;margin-top:5px;">1</td>
                                <td class="bian" style="text-align:center;margin-top:5px;">2</td>
                                <td class="bian" style="text-align:center;margin-top:5px;">3</td>
                                <td class="bian" style="text-align:center;margin-top:5px;">4</td>
                                <td class="bian" style="text-align:center;margin-top:5px;">5</td>
                                <td class="bian" style="text-align:center;margin-top:5px;">6</td>
                                <td class="bian" style="text-align:center;margin-top:5px;">7</td>
                                <td class="bian" style="text-align:center;margin-top:5px;">8</td>
                                <td style="text-align:center;margin-top:5px;">9</td>
                                <td style="text-align:center;margin-top:5px;">10</td>
                            </tr>
                             <tr v-for="(item,index) in form.brancesList" :key="item.index"> 
                                <td class="bian">
                                     <input type="text"  v-model="item.projectCode" style="width:100px;text-align:center">
                                </td>
                               <td class="bian">
                                     <input type="text" v-model="item.projectName" style="width:100px;text-align:center">
                                </td>
                                <td class="bian">
                                    <div style="overflow:hidden;display:inline-block"> 
                                            <div>
                                                <!-- <input type="text" class="marginBottom width200" v-model="item.province" > -->
                                                <el-select class="pickProvince" style="float:left" v-model="form.brancesList[index].province" @change="testcountry(index)">
                                                    <el-option v-for="option in arr" :value="option.name" :key="option.index">
                                                        {{ option.name }}
                                                    </el-option>
                                                </el-select> 
                                                <span class="marginBottom ">省（自治区、直辖市）</span>
                                            </div>
                                            <p>
                                                <!-- <input type="text" class="marginBottom width200" v-model="item.city" > -->
                                                <el-select  class="pickProvince" v-model="form.brancesList[index].city" @change="testcity(index)">
                                                    <el-option v-for="option in cityArr" :value="option.name" :key="option.index">
                                                        {{ option.name }}
                                                    </el-option>
                                                </el-select>
                                                <span class="marginBottom">市（地、州、盟）</span>
                                            </p>
                                            <p>
                                                <!-- <input type="text" class="marginBottom width200" v-model="item.county" > -->
                                                <el-select  class="pickProvince" v-model="form.brancesList[index].country" >
                                                    <el-option v-for="option in districtArr" :value="option.name" :key="option.index">
                                                        {{ option.name }}
                                                    </el-option>
                                                </el-select>
                                                <span class="marginBottom">县（市、区、旗） </span> 
                                            </p>
                                            
                                        </div> 
                                        <div class="marginBottom" style="overflow:hidden;display:block">
                                            <input class="width200 " v-model="item.towns">乡（镇）
                                            <input class="width200 "  v-model="item.village">街（村）、门牌号
                                        </div>
                                        <div class="marginBottom" >
                                            区划代码:<input style="margin-bottom:10px;" class="width200 " v-model="item.unitZoningCode">
                                        </div>    
                                       
                                </td>
                               <td class="bian">
                                     <input type="text"  v-model="item.industryCode" style="width:80px;text-align:center">
                                </td>
                               <td class="bian">
                                     <input type="text" v-model="item.startTime" style="width:100px;text-align:center">
                                </td>
                                <td class="bian">
                                     <input type="text"  v-model="item.productionTime" style="width:100px;text-align:center">
                                </td>
                               <td class="bian">
                                     <input type="text"  v-model="item.planTotalInvestment" style="width:80px;text-align:center">
                                </td>
                                <td class="bian">
                                     <input type="text" v-model="item.cumulativeInvestment" style="width:90px;text-align:center" >
                                </td>
                                <td >
                                     <input type="text"  v-model="item.completeInvestment" style="width:80px;text-align:center">
                                </td>
                                <td style="text-align:center;">
                                    <el-button type="danger" size="mini" @click='deleteLine(index)'>删除本行</el-button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    </div>
                <el-form-item >
                    <div>
                        <span style="font-size:8px">单位负责人：</span>
                        <el-input style="width:100px" v-model="form.unitHead"></el-input>
                        <span style="font-size:8px">统计负责人：</span>
                        <el-input style="width:100px" v-model="form.statisticalControlOfficer"></el-input>
                        <span style="font-size:8px">填表人：</span>
                        <el-input style="width:100px" v-model="form.fillFormBy"></el-input>
                        <span style="font-size:8px">联系电话：</span>
                        <el-input style="width:120px" v-model="form.phone"></el-input>
                        <span style="font-size:8px">出报日期：</span>
                        <el-date-picker  v-model="form.createTime" class="width100 marginBottom"    type="date"  placeholder="选择日期"> </el-date-picker>
                    </div>   
                </el-form-item>
                <el-form-item>
                    <div>
                        <p>说明：1.统计范围：辖区内除一套表调查单位、金融和铁路部门负责普查的单位以外的全部法人单位。</p>
                        <p style="margin-left:45px"> 
                            2.报送日期及方式：2019年4月30日24时前通过PAD完成数据采集。
                        </p>
                        <p style="margin-left:45px">
                             3.有500万元及以上固定资产投资项目的单位应当填报“其中：计划总投资500万元及以上项目完成投资额”，有5000万元及以上固定资产投资项目的单位应当填报“其中：计划总投资5000万元及以上项目个数”，并将5000万元及以上项目具体信息分别填列。
                        </p>
                        <p style="margin-left:45px"> 
                            4.对2018年12月份月报单位，5000万元及以上项目部分数据由国家统计局根据2018年12月份数据复制，调查单位在此基础上根据实物工作量填报依据进行核实填报。
                        </p>
                        <p style="margin-left:45px"> 
                            5.上表中“调查单位财务支出法固定资产投资完成额”以及“其中：计划总投资500万元及以上项目财务支出法完成投资额”根据法人单位会计账簿中“在建工程”、“购置不需安装的设备工器具”、“土地使用权”等相关科目或会计分录“借方累计发生额”数据填报；5000万元及以上投资项目完成投资，数据根据工程进度填报。具体填报方法见指标解释。
                        </p>
                        <p style="margin-left:45px"> 
                            6.审核关系：
                        </p>
                        <p style="margin-left:45px"> 
                            （1）调查单位财务支出法固定资产投资完成额≥计划总投资500万元及以上项目财务支出法完成投资额

                        </p>
                        <p style="margin-left:45px">  
                           （2）计划总投资≥自开始累计完成投资
                        </p>    
                        <p style="margin-left:45px"> 
                           （3）自开始累计完成投资≥本年完成投资
                        </p>  
                        <p style="margin-left:45px"> 
                           7.根据北京市各级政府及有关部门需求，本报表统计范围调整为：辖区内除北京一套表调查单位、金融和铁路部门负责普查的单位以外的全部法人单位。
                        </p>                              
                    </div>
                </el-form-item>
            </el-form>
        </el-main>
        <div slot="footer" class="dialog-footer" style="text-align: center"> 
            <el-button type="primary" @click="saveFormtwo">暂存</el-button>
            <el-button type="success" @click="submitFormtwo('form')">提交</el-button> 
            <el-button type="danger" @click="download">下载PDF表格</el-button> 
        </div>
    </div>
</template>
<script>
//import { log } from 'util';
    var list = {
                projectCode:"",
                projectName:"",
                province:'',//省(3)
                city:'',//市(3)
                country:'',//县(3)
                towns:"",
                village:"",
                unitZoningCode:"",
                industryCode:"",
                startTime:"",
                productionTime:"",
                planTotalInvestment:"",
                cumulativeInvestment:"",
                completeInvestment:"",
            }
export default {
    data(){
        return{
            arr:cityList, //省市区
            cityArr: [],  //市
            districtArr: [], //县
            organizationCode:this.$store.get('organizationCode'),//组织机构代码
            socialCreditCode:this.$store.get('socialCreditCode'),//统一社会信用代码
            unitDetailedName:this.$store.get('unitDetailedName'),//单位详细名称
            id:null,//主键id
            form:{
                investmentAmount:'',//固定资产本年完成投资额     万元（甲）
                moreThan5000:'',//其中：5000万元及以上项目     个（乙）（其他有5000万以上在建项目法人单位填写下表）
                //projectCode:'',//项目编码(1)
                //projectName:'',//项目名称(2)
                // province:'',//省(3)
                // city:'',//市(3)
                // county:'',//县(3)
                // towns:'',//乡镇(3)
                // village:'',//村(3)
                // unitZoningCode:'',//区划代码(3)
                // industryCode:'',//项目行业编码(4)
                // startTime:'',//项目开工时间(5)年月
                // productionTime:'',//本年全部投产时间（6）年月
                // planTotalInvestment:'',//计划总投资（万元）(7)
                // cumulativeInvestment:'',//自开始建设累计完成投资（万元）(8)
                // completeInvestment:'',//本年完成投资（万元)(9)
                unitHead:'',//单位负责人
                statisticalControlOfficer:'',//统计负责人
                fillFormBy:'',//填表人
                phone:'',//联系电话
                createTime:'',//填表时间
                brancesList:[
                    {
                        projectCode:"",
                        projectName:"",
                        province:'',//省(3)
                        city:'',//市(3)
                        country:'',//县(3)
                        towns:"",
                        village:"",
                        unitZoningCode:"",
                        industryCode:"",
                        startTime:"",
                        productionTime:"",
                        planTotalInvestment:"",
                        cumulativeInvestment:"",
                        completeInvestment:"",
                    }  
                ],       
            },
            rules:{
                 investmentAmount:[
                        { required: true, message: '（此处不能为空）', trigger: 'none' }
                ],
                 moreThan5000:[
                        { required: true, message: '（此处不能为空）', trigger: 'none' }
                ],
            },
            saveData:{
                investmentAmount:false,
                moreThan5000:false,
            },
        }
    },
    mounted:function(){
        this.getDate();    
    },
    methods:{
        //添加行
        addRow(){
            var brances = {};
            for (var key in list) {
                brances[key] = list[key];
            }
            this.form.brancesList.push(brances);
        },
        //数据回显
        getDate(){
            console.log('111');
            let self = this;
            let baseId = this.$store.get("companyId");
            this.$http({
                mothod:'get',
                url:'711Two/get?baseId='+baseId,
            }).then(function(res){
                   console.log(res);
                   console.log("长度"+res.data.data.length);
                if(res.status===200){
                    if(res.data.status===401){
                        self.$message.error("请先登录！");
                        self.$router.push({ path: '/' });
                        return;
                    }
                    if(res.data.data.length===0){
                        self.id =null;
                    }else{
                        for(var k in res.data.data[0]){
                            if(res.data.data[0][k] !=null){
                            self.form[k] = res.data.data[0][k];
                            }
                        };

                        // self.$set(self.form, 'brancesList', res.data.data)
                        self.form.brancesList = res.data.data
                        console.log(res.data.data);
                        self.form.brancesList.shift()
                        for(var i=0,len=res.data.data.length;i<len;i++){
                            self.id = res.data.data[i].id;
                             console.log(res.data.data[i].id);
                        }
                       
                        
                        // for(var i=1,len=res.data.data.length;i<len;i++){
                        //     console.log(i);
                        //     console.log('测试'+ res.data.data[i].createTime)
                        //     self.form.brancesList[i-1].projectCode=res.data.data[i].projectCode;
                        //     self.form.brancesList[i-1].projectName=res.data.data[i].projectName;
                        //     self.form.brancesList[i-1].province=res.data.data[i].province;
                        //     self.form.brancesList[i-1].city=res.data.data[i].city;
                        //     self.form.brancesList[i-1].county=res.data.data[i].county;
                        //     self.form.brancesList[i-1].planTotalInvestment=res.data.data[i].planTotalInvestment;
                        //     self.form.brancesList[i-1].towns=res.data.data[i].towns;
                        //     self.form.brancesList[i-1].village=res.data.data[i].village;
                        //     self.form.brancesList[i-1].unitZoningCode=res.data.data[i].unitZoningCode;
                        //     self.form.brancesList[i-1].industryCode=res.data.data[i].industryCode;
                        //     self.form.brancesList[i-1].startTime=res.data.data[i].startTime;
                        //     self.form.brancesList[i-1].productionTime=res.data.data[i].productionTime;
                        //     self.form.brancesList[i-1].cumulativeInvestment=res.data.data[i].cumulativeInvestment;
                        //     self.form.brancesList[i-1].completeInvestment=res.data.data[i].completeInvestment;
                        //     self.id = res.data.data[i].id;    
                        // }
                       
                    }
                }else{
                     self.$message.error(res.message);
                }   
            }).catch(function(err){
            })
        },
        //提交
        submitFormtwo(formName){
            console.log(77777);
            for(var k in this.saveData){
                if(this.saveData[k] === true){
                    return;
                }
            }
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    let self = this;
            let data = this.form;
            data.baseId= this.$store.get("companyId");
            // data.investmentAmount=this.form.investmentAmount
            // data.moreThan5000=this.form.moreThan5000
            // data.province=this.form.province
            // data.city=this.form.city
            // data.county=this.form.county
            // data.unitHead=this.form.unitHead
            // data.statisticalControlOfficer=this.form.statisticalControlOfficer
            // data.fillFormBy=this.form.fillFormBy
            // data.phone=this.form.phone
            // data.createTime=this.form.createTime
           data.id=this.id;
           data.state = 1;
            console.log(this.form);
            console.log(this.form.brancesList);
            this.$http({
                method:'post',
                url:'711Two/insertOrUpdate',
                data:data,
            }).then(function(res){
                console.log(res);
                 if(res.status === 200){
                    self.$message.success(res.data.message);
                    self.form = res.data.data;
                    self.form.updateTime = res.data.data.newupdateTime;
                    self.$router.push({ path: '/home' })
                }else{
                    self.$message.error(res.data.message);
                }
             }).catch(function(err){
                console.log(err);    
            })
                }else{
                    return false;
                }
            })
            
        },
        //暂存
        saveFormtwo(){
            for(var k in this.saveData){
                if(this.saveData[k] === true){
                    return;
                }
            }
            let self = this;
            let data = this.form;
            data.baseId= this.$store.get("companyId");
            data.id=this.id;
            data.state = 0;
            console.log(this.form);
            console.log(this.form.brancesList);
            this.$http({
                method:'post',
                url:'711Two/insertOrUpdate',
                data:data,
            }).then(function(res){
                console.log(res);
                 if(res.status === 200){
                    self.$message.success(res.data.message);
                    self.form = res.data.data;
                    self.form.updateTime = res.data.data.newupdateTime;
                    self.$router.push({ path: '/home' })
                }else{
                    self.$message.error(res.data.message);
                }
             }).catch(function(err){
                console.log(err);    
            })
        },
        //下载pdf
        download(){
            let self = this;
            let data = this.form;
            console.log(data.state);
            if(data.state === 2){
                console.log(555555555555555555);
                //  let url = 'http://192.168.0.131:8001/register/711Base/downLoad?baseId='+this.$store.get("companyId");
            let url = this.$downloadUrl+'/711Two/downLoad?baseId='+this.$store.get("companyId");
            window.location.href=url;
            }else{
                this.$message.error('有未提交表不能下载');
            }
        },
        //检验输入金额
        testMoney(value,data){
            let reg =  /^(\-|\+?)\d{1,15}(\.\d{1,5})?$/;
            if(!reg.test(value) && value){
                for(var r in this.saveData){
                if(r === data){
                    this.saveData[r] = true;
                }
                }
            }else if(reg.test(value) || !value){
                for(var rs in this.saveData){
                if(rs === data){
                    this.saveData[rs] = false;
                }
                }
            }
        },
        testNumber(value,data){
            let reg = /^(\d{1,11})$/;
            if(!reg.test(value) && value){
                for(var r in this.saveData){
                if(r === data){
                    this.saveData[r] = true;
                }
                }
            }else if(reg.test(value) || !value){
                for(var rs in this.saveData){
                if(rs === data){
                    this.saveData[rs] = false;
                }
                }
            }
        },
        //删除一行
        deleteLine(key){
            console.log('1111');
            console.log(key);
            this.form.brancesList.splice(key,1);
        },
        //获取省市
        city: function (index,that) {
            console.log(index);
            for (var i in that.arr) {
                var obj = that.arr[i];
                if (obj.name == that.form.brancesList[index].province) {
                    that.cityArr = obj.sub;
                    break;
                }
            }
            that.form.brancesList[index].city = that.cityArr[1].name;
            console.log( that.form.brancesList[index].city +":::"+ that.cityArr[1].name)
        },
         //获取县区
        country: function (index,that) {
            console.log(index);
            for (var i in that.cityArr) {
                var obj = that.cityArr[i];
                if (obj.name == that.form.brancesList[index].city) {
                    that.districtArr = obj.sub;
                    break;
                }
            }
            if(that.districtArr && that.districtArr.length > 0 && that.districtArr[1].name) {
                that.form.brancesList[index].country = that.districtArr[1].name;
            } else {
                that.form.brancesList[index].country = '';
            }
        },
        //省发生变化时
        testcountry(index){
            console.log(index);
            let that = this;
            this.$options.methods.city(index,that);
            this.$options.methods.country(index,that);
        },
        //市发生变化时
        testcity(index){
            let that = this;
            console.log(index);
            this.$options.methods.country(index,that);
        },
    },
}
</script>
<style scoped>
    #main input{
        border:0px solid #dcdfe6;
        border-bottom: 1px solid #ccc;
        border-radius: 0;
    }
    .width400{
        width: 400px;
    }
     #main table tr,#main table td,#main table th{
        /* border-right: 1px solid #ddd;
        border-left: 1px solid #ddd; */
        border-bottom: 1px solid black;
        border-top: 1px solid black;
    }
    .bian{
        border-right: 1px solid #ddd;
    }
    .width200{
        width: 110px
    }
    .marginBottom{
        font-size: 10px
    }
</style>

